@import './config';

.demo-markdown {
  overflow: auto;
  color: #314659;
  font-size: 14px;
  pre,
  code,
  kbd,
  samp {
    font-size: 1em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    line-height: 22px;
  }
  h2,
  h3,
  h4,
  h5,
  h6 {
    clear: both;
    margin: 2em 0 0.6em;
    color: #1f2f3d;
    font-weight: 500;
    font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
      'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  }
  h2 {
    font-size: 22px;
    line-height: 32px;
  }
  h3 {
    font-size: 18px;
  }
  h4 {
    font-size: 16px;
  }
  h5 {
    font-size: 14px;
  }
  h6 {
    font-size: 12px;
  }
  hr {
    clear: both;
    height: 1px;
    margin: 56px 0;
    background: #ebedf0;
    border: 0;
  }
  .doc-highlight p,
  .doc-highlight pre {
    margin: 1em 0;
  }
  ul {
    padding-left: 0;
  }
  ul > li {
    margin-left: 20px;
    padding-left: 4px;
    list-style-type: circle;
  }
  ul > li:empty {
    display: none;
  }
  ol > li {
    margin-left: 20px;
    padding-left: 4px;
    list-style-type: decimal;
  }
  ul > li > p,
  ol > li > p {
    margin: 0.2em 0;
  }
  code {
    margin: 0 1px;
    padding: 0.2em 0.4em;
    font-size: 0.9em;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 3px;
  }
  .doc-highlight pre {
    padding: 16px;
    overflow: auto;
    font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    background: #fff;
    border-radius: 2px;
  }
  pre code {
    margin: 0;
    padding: 0;
    overflow: auto;
    color: #314659;
    font-size: 13px;
    background: #fff;
    border: none;
  }
  strong,
  b {
    font-weight: 500;
  }
  & > table {
    width: 100%;
    margin: 8px 0 16px;
    empty-cells: show;
    border: 1px solid #ebedf0;
    border-collapse: collapse;
    border-spacing: 0;
  }
  & > table th {
    color: #5c6b77;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.02);
  }
  .markdown > table th {
    color: #5c6b77;
    font-weight: 500;
    white-space: nowrap;
    text-align: left;
    background: rgba(0, 0, 0, 0.02);
  }

  & > table th,
  & > table td {
    padding: 16px 16px;
    text-align: left;
    border: 1px solid #ebedf0;
  }

  a {
    color: #2196f3;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-text-decoration-skip: objects;
  }

  table {
    margin: 2em 0;
    font-size: 14px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    line-height: 1.5;
    border-width: 0;
    th {
      border-width: 0 0 2px 0;
    }
    td {
      padding: 14px 16px;
      border-width: 1px 0;
      border-color: #e8e8e8;
    }
    td:first-child {
      width: 20%;
      color: $--color-primary-dark;
      font-weight: 500;
    }
    td:nth-child(3) {
      width: 22%;
      color: #ec407a;
      font-size: 13px;
      word-break: keep-all;
    }
    td:nth-child(4) {
      width: 13%;
      font-size: 13px;
    }
  }
  .hljs-deletion,
  .hljs-name,
  .hljs-section,
  .hljs-selector-tag,
  .hljs-subst {
    color: $--color-danger;
  }
  .hljs-attr,
  .hljs-number,
  .hljs-selector-attr,
  .hljs-selector-class,
  .hljs-selector-pseudo,
  .hljs-template-variable,
  .hljs-type,
  .hljs-variable {
    color: #986801;
  }
  .hljs-addition,
  .hljs-attribute,
  .hljs-meta-string,
  .hljs-regexp,
  .hljs-string {
    color: $--color-success;
  }
}
